.box {
    width: 100px;
    height: 100px;
    background-color: red;
    transform-origin: 50% 50%;
    /* transform: rotate(45deg); */
    animation: rotateZ 2s linear infinite;
}

@keyframes rotateZ {

    /* 0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    } */
    from {
        transform: translateX(0) rotate(0deg);
    }
    to {
        transform: translateX(300px) rotate(360deg);
    }
}